<template>
    <div class="second_level_page coupons_detail_page">
        <div class="coupons_detail_box">
            <div class="cd_top">
               <div class="dw">￥{{voucher.deductAmount}}</div>
            </div>
            <div class="middle">
                <h2 class="ellipsis">{{voucher.voucherName}}</h2>
                <div class="oo clear">
                    <div class="left"><span class="line"><em :style="{left: cssLeft(voucher.totalNum,voucher.leaveNum)}"></em></span></div>
                    <!-- 程序注意，橘色条左右移动，修改left:-50%;里面的数字即可，减号保留 -->
                    <div class="right">已兑换{{ratio(voucher.totalNum,voucher.leaveNum)}}%</div>
                </div>
            </div>
            <div class="contain">
               <h2>商品简介</h2>
               <p>礼券代码：{{voucher.voucherCode}}</p>
               <p>抵扣金额：￥{{voucher.deductAmount}}</p>
               <p v-if="voucher.voucherType==1">礼券类型：{{type(voucher.voucherClass,voucher.warehouseCode)}}</p>
               <p v-else>礼券类型：旅游门票</p>
               <p>有效时间：{{voucher.expiryDate}}天</p>
            </div>
        </div>
        <div class="footer_01 clear">
             <div class="left"><img src="../../../images/jiu.png" alt="">{{voucher.jiubiNum}}</div>
             <div v-if="exchangeMark==0" class="right" @click="exchangeVoucher()">立即兑换</div>
             <div v-else style="background:#c0c0c0" class="right"  @click="exchangeVoucher()">立即兑换</div>
        </div>
        <alert-tip v-if="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>
    </div>
</template>

<script>
    import alertTip from 'src/components/common/alertTip'
    import {mapState,mapMutations} from 'vuex'
    import {voucherDetail,WXexchangeVoucher} from 'src/service/getData'

    export default {
        data(){
            return{
                voucher:'',
                voucherCode:'',
                types:[],
                showAlert: false,
                alertText: '',
                tipType: 0,
                exchangeMark:0,
            }
        },
        mounted(){
            this.voucherCode = this.$route.query.voucherCode;
            this.exchangeMark = this.$route.query.exchangeMark;
            this.getVoucherDetail();
        },
        computed:{
             ...mapState([
                'userInfo'
            ]),     
        },
        components: {
            alertTip,
        },
        methods: {
            type(voucherClass,warehouseCode) {
                if(voucherClass) {
                   this.types = voucherClass.split(',');
                   if(this.types.length!=3) {
                        return '不能解析的类型' 
                   } else {
                        if(this.types[0]==1) {                           
                            if(this.voucher.brandId==0&&this.voucher.classId==0) {
                                return '全场通用';
                            } else if(this.voucher.brandId!=0&&this.voucher.classId==0) {
                                return '全场通用-'+this.voucher.brandName;
                            } else if (this.voucher.brandId!=0&&this.voucher.classId!=0) {
                                return '全场通用-'+this.voucher.brandName+this.voucher.className;
                            } else if(this.voucher.brandId==0&&this.voucher.classId!=0) {
                                return '全场通用-'+this.voucher.className;
                            }
                        } else if(this.types[0]==2) {
                            if(this.voucher.brandId==0&&this.voucher.classId==0) {
                                return '指定仓库('+warehouseCode+')';
                            } else if(this.voucher.brandId!=0&&this.voucher.classId==0) {
                                return '指定仓库('+warehouseCode+')'+this.voucher.brandName;
                            } else if (this.voucher.brandId!=0&&this.voucher.classId!=0) {
                                return '指定仓库('+warehouseCode+')'+this.voucher.brandName+this.voucher.className;
                            } else if (this.voucher.brandId==0&&this.voucher.classId!=0) {
                                return '指定仓库('+warehouseCode+')'+this.voucher.className;
                            }
                        }
                    }
                }
            },
            async getVoucherDetail() {
                if (this.userInfo && this.userInfo.uid) {
                    let data = await voucherDetail(this.userInfo.token,this.voucherCode);
                    this.voucher = data.data;
                }
            },
            async exchangeVoucher() {
                if(this.exchangeMark==1){
                    this.showAlert = true;
                    this.alertText = "已兑换过该礼券！";
                    return;
                }
                let data = await WXexchangeVoucher(this.userInfo.token, this.userInfo.id, this.voucher.jiubiNum, this.voucherCode);
                
                if(data.resultCode==200){
                    this.tipType = 1;
                    this.showAlert = true;
                    this.alertText = data.resultMessage;
                } else {
                    this.tipType = 0;
                    this.showAlert = true;
                    this.alertText = data.resultMessage;
                }   
            },
            //售出比率
            ratio(totalNum,leaveNum)
            {
                let num = (totalNum-leaveNum)/totalNum*100;
                return num.toFixed(1);
            },
            //售出比率
            cssLeft(totalNum,leaveNum)
            {
                let num = (totalNum-leaveNum)/totalNum*100;
                let cssLeft = Math.round((num-100)*100)/100 +'%';
                return cssLeft;
            },
            closeTip(){
                this.showAlert = false;
                if(this.tipType == 1){
                    this.$router.go(-1);    
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
span , em , i{font-style:normal;}
.coupons_detail_box{background:#fff;}
.coupons_detail_box .cd_top{position:relative; width: 100%; height: 2.6rem; background: url(../../../images/binding_bg.png) no-repeat; background-size: cover;}
.coupons_detail_box .cd_top .dw{width:100%;height:2.6rem;font-size:.6rem; line-height:2.6rem;text-align: center;color:#fff;}
.coupons_detail_box .middle{padding:.3rem;border-bottom:.01rem solid #eee;}
.coupons_detail_box .middle h2{font-size:.3rem;color:#333;margin-bottom:.2rem;}
.coupons_detail_box .contain{padding:.3rem;}
.coupons_detail_box .contain h2{font-size:.28rem;color:#333;margin-bottom:.2rem;}
.coupons_detail_box .contain p{margin-bottom:.18rem;color:#666;font-size:.26rem;}
.oo{width:100%;margin:0 auto;margin-top:.22rem;}
.oo .left{width:5rem;}
.oo .right{
    text-align:right;font-size:.2rem;
    color:#999;
    width:calc(100% - 5.2rem);
    -webkit-width:calc(100% - 5.2rem);
    -moz-width:calc(100% - 5.2rem);
    -o-width:calc(100% - 5.2rem);
}
.oo .line{display:block;overflow:hidden; margin-top:.13rem; position:relative;background:#f4f4f4;border-radius:10rem;width:100%;height:.08rem;}
.oo .line em{display:block;position:absolute;left:0%;top:0; background:#ffa101;border-radius:10rem;width:100%;height:.08rem;}
.footer_01{line-height:.94rem;width:100%;position:fixed;bottom:0;left:0;background:#fff;}
.footer_01 .left{font-size:.32rem;color:#ffa101;margin-left:.3rem;}
.footer_01 .left img{margin-right:.16rem;width:.26rem;height:.26rem; }
.footer_01 .right{width:2.48rem;text-align: center;background:#ffa101;font-size:.32rem;color:#fff;}
</style>